<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item label="设备名" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item label="类型" name="type">
      <a-select v-model:value="formState.type" placeholder="请选择类型">
        <a-select-option value="生产设备">生产设备</a-select-option>
        <a-select-option value="办公设备">办公设备</a-select-option>
        <a-select-option value="服务设备">服务设备</a-select-option>
        <a-select-option value="其他设备">其他设备</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="部门" name="department">
      <a-select v-model:value="formState.department" placeholder="请选择部门">
        <a-select-option value="经营部门">经营部门</a-select-option>
        <a-select-option value="生产部门">生产部门</a-select-option>
        <a-select-option value="行政部门">行政部门</a-select-option>
        <a-select-option value="其他部门">其他部门</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="品牌" name="brand">
      <a-input v-model:value="formState.brand" />
    </a-form-item>
    <a-form-item label="唯一标记码" name="sn">
      <a-input v-model:value="formState.sn" />
    </a-form-item>
    <a-form-item label="入库时间" name="inboundAt">
      <a-date-picker
        v-model:value="inboundAt"
        type="date"
        placeholder="Pick a date"
        style="width: 100%"
      />
    </a-form-item>
    <a-form-item label="设备登记时间" name="registrationAt">
      <a-date-picker
        v-model:value="registrationAt"
        type="date"
        placeholder="Pick a date"
        style="width: 100%"
      />
    </a-form-item>
    <div class="flex justify-end">
      <a-button type="danger" @click="generate">自动生成</a-button>
    </div>
  </a-form>
</template>
<script lang="ts">
import { Random } from "mockjs";
import { CloudDeviceAppendForm } from "model";
import moment, { Moment } from "moment";
import {
  defineComponent,
  inject,
  reactive,
  ref,
  toRaw,
  UnwrapRef,
  watchEffect,
} from "vue";
import { generateDeviceAppendForm } from "@/api/mock/cloud";
import { getTodayString } from "@/utils/time";
import { createDevice } from "@/controller/Cloud";

export default defineComponent({
  name: "AppendCloudDeviceForm",
  setup() {
    const formRef = ref();
    const formState: UnwrapRef<CloudDeviceAppendForm> = reactive({
      name: "",
      code: Random.integer(10, 100).toString(),
      type: undefined,
      department: undefined,
      brand: "",
      sn: "",
      inboundAt: "",
      registrationAt: "",
      createdBy: "",
      status: 1,
      createdAt: getTodayString(),
    });
    const inboundAt = ref<Moment>(moment());
    const registrationAt = ref<Moment>(moment());
    watchEffect(() => {
      formState.inboundAt = inboundAt.value.format("YYYY-MM-DD");
    });
    watchEffect(() => {
      formState.registrationAt = registrationAt.value.format("YYYY-MM-DD");
    });

    const generate = () => {
      Object.assign(formState, generateDeviceAppendForm());
      inboundAt.value = moment(formState.inboundAt);
      registrationAt.value = moment(formState.registrationAt);
    };
    const rules = {
      name: [
        {
          required: true,
          message: "请输入设备名",
          trigger: "blur",
        },
      ],
      type: [
        {
          required: true,
          message: "请选择设备类型",
          trigger: "blur",
        },
      ],
      department: [
        {
          required: true,
          message: "请选择设备部门",
          trigger: "blur",
        },
      ],
      brand: [
        {
          required: true,
          message: "请输入设备品牌",
          trigger: "blur",
        },
      ],
      sn: [
        {
          required: true,
          message: "请输入设备唯一标示码",
          trigger: "blur",
        },
      ],
    };
    const refresh: Function = inject("refresh") ?? new Function();
    const onSubmit = async () => {
      return await formRef.value
        .validate()
        .then(async () => {
          await createDevice(toRaw(formState));
          refresh();
          return true;
        })
        .catch(() => {
          return false;
        });
    };
    return {
      formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      other: "",
      formState,
      rules,
      onSubmit,
      location,
      inboundAt,
      registrationAt,
      generate,
    };
  },
});
</script>

function getTodayString(): any { throw new Error("Function not implemented."); }
